<template>
  <div>
    <div class="tools-div">
      <el-button type="success" size="small" @click="handleShowAddDialog">
        添 加
      </el-button>
    </div>

    <el-table :data="list" style="width: 100%">
      <el-table-column prop="name" label="品牌名称" />
      <el-table-column prop="logo" label="品牌图标" #default="scope">
        <img :src="scope.row.logo" width="50" />
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作" align="center" width="200" #default="scope">
        <el-button
          type="primary"
          size="small"
          @click="handleUpdateDialog(scope.row)"
        >
          修改
        </el-button>
        <el-button @click="handleDel(scope.row.id)" type="danger" size="small">
          删除
        </el-button>
      </el-table-column>
    </el-table>

    <el-pagination
      :page-sizes="[2, 3, 4, 5]"
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      @size-change="handleChange"
      @current-change="handleChange"
      :total="total"
    />
    <!-- 新增修改品牌的对话框 -->
    <div>
      <el-dialog v-model="dialogVisible" title="添加或修改" width="30%">
        <el-form label-width="120px">
          <el-form-item label="品牌名称">
            <el-input v-model="brand.name" />
          </el-form-item>
          <el-form-item label="品牌图标">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :action="uploadUrl"
              :on-success="handleUploadSuccess"
              :headers="headers"
              :data="{ module: 'logo' }"
            >
              <img v-if="brand.logo" :src="brand.logo" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSaveOrUpdate">
              提交
            </el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ListBrands, DeleteById, Save, UpdateById } from '@/api/brand'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useApp } from '@/pinia/modules/app'
//-------------------------------更新功能
// 修改按钮事件函数：弹出更新品牌对话框
const handleUpdateDialog = row => {
  //根据id查询数据回显：开发中99%使用此方式 推荐
  // 直接使用row回显到对话框中
  //浅拷贝
  // brand.value = row
  //深拷贝可以解决 变量指向同一个对象的问题
  brand.value = { ...row }
  //弹出对话框
  dialogVisible.value = true
}
const handleUpdate = async () => {
  await UpdateById(brand.value)
  ElMessage.success('更新成功')
  //关闭对话框 刷新页面
  dialogVisible.value = false
  fetchData()
}
//--------------------------------更新功能-==

//------------------------新增功能
let dialogVisible = ref(false)
let uploadUrl = ref('http://localhost:8501/admin/system/file/upload')
let brand = ref({})
const headers = ref({
  token: useApp().authorization.token,
})
// 上传brand图表成功的回调事件函数
const handleUploadSuccess = response => {
  console.log('handleUploadSuccess', response)
  brand.value.logo = response.data
}
// 添加按钮  事件函数： 点击时可以弹出对话框
const handleShowAddDialog = () => {
  brand.value = {}
  dialogVisible.value = true
}
const handleSave = async () => {
  await Save(brand.value)
  ElMessage.success('新增成功')
  //关闭对话框 刷新页面
  dialogVisible.value = false
  fetchData()
}
//----------------------------新增功能===
// 新增或提交 对话框表单 提交按钮事件函数
const handleSaveOrUpdate = () => {
  if (brand.value.id) {
    //更新
    handleUpdate()
  } else {
    //新增
    handleSave()
  }
}
//-------------------------删除功能
const handleDel = id => {
  ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    //点击确认按钮
    .then(async () => {
      await DeleteById(id)
      ElMessage.success('删除成功')
      // pageNum.value = 1
      // pageSize.value = 3
      fetchData()
    })
    //点击取消按钮
    .catch(() => {
      ElMessage.info('取消删除')
    })
}

//-------------------------删除功能==

let pageNum = ref(1)
let pageSize = ref(3)
const handleChange = () => {
  fetchData()
}
onMounted(() => {
  fetchData()
})

const fetchData = async () => {
  const { data } = await ListBrands(pageNum.value, pageSize.value)
  list.value = data.list
  total.value = data.total
}

// 定义表格数据模型
const list = ref([
  {
    id: 1,
    name: '华为',
    logo: 'http://139.198.127.41:9000/sph/20230506/华为.png',
  },
  {
    id: 2,
    name: '小米',
    logo: 'http://139.198.127.41:9000/sph/20230506/小米.png',
  },
])

// 分页条数据模型
const total = ref(0)
</script>

<style scoped>
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
